<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>添加图片</title>
		<!-- css代码 start -->
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<link href="../../../css/global.css" rel="stylesheet" />
		<link href="../../../css/style.css" rel="stylesheet" />
		<style>
			.mui-preview-image.mui-fullscreen {
				position: fixed;
				z-index: 20;
				background-color: #000;
			}
			.mui-preview-header,
			.mui-preview-footer {
				position: absolute;
				width: 100%;
				left: 0;
				z-index: 10;
			}
			.mui-preview-header {
				height: 44px;
				top: 0;
			}
			.mui-preview-footer {
				height: 50px;
				bottom: 0px;
			}
			.mui-preview-header .mui-preview-indicator {
				display: block;
				line-height: 25px;
				color: #fff;
				text-align: center;
				margin: 15px auto 4;
				width: 70px;
				background-color: rgba(0, 0, 0, 0.4);
				border-radius: 12px;
				font-size: 16px;
			}
			.mui-preview-image {
				display: none;
				-webkit-animation-duration: 0.5s;
				animation-duration: 0.5s;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			.mui-preview-image.mui-preview-in {
				-webkit-animation-name: fadeIn;
				animation-name: fadeIn;
			}
			.mui-preview-image.mui-preview-out {
				background: none;
				-webkit-animation-name: fadeOut;
				animation-name: fadeOut;
			}
			.mui-preview-image.mui-preview-out .mui-preview-header,
			.mui-preview-image.mui-preview-out .mui-preview-footer {
				display: none;
			}
			.mui-zoom-scroller {
				position: absolute;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-align: center;
				-webkit-align-items: center;
				align-items: center;
				-webkit-box-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				width: 100%;
				height: 100%;
				margin: 0;
				-webkit-backface-visibility: hidden;
			}
			.mui-zoom {
				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}
			.mui-slider .mui-slider-group .mui-slider-item img {
				width: auto;
				height: auto;
				max-width: 100%;
				max-height: 100%;
			}
			.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
				width: 100%;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
				display: inline-table;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
				display: table-cell;
				vertical-align: middle;
			}
			.mui-preview-loading {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: none;
			}
			.mui-preview-loading.mui-active {
				display: block;
			}
			.mui-preview-loading .mui-spinner-white {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -25px;
				margin-top: -25px;
				height: 50px;
				width: 50px;
			}
			.mui-preview-image img.mui-transitioning {
				-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
				transition: transform 0.5s ease, opacity 0.5s ease;
			}
			@-webkit-keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@-webkit-keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			@keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			p img {
				max-width: 100%;
				height: auto;
			}
			
			.mui-preview-header .mui-preview-indicator {
				display: none;
			}
		</style>
		<!-- css代码 end -->
	</head>

	<body>
		<!-- html代码 start -->
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 id="title" class="mui-title">添加图片</h1>
		</header>
		<div class="mui-content">
			<div hidden>
				<input type="hidden" id="helpId" />
				<input type="hidden" id="serviceNo" />
				<input type="hidden" id="path" />
				<input type="hidden" id="failSize" />
			</div>
			<div class="details_con">
				<div class="clum">
					<span class="name">附件图片<em class="t_red">*</em></span>
					<span class="txt red" style="color: #FF0000" id="takePicture">浏览</span>
				</div>
				<div class="clum autoHeight">
					<span class="name">图片说明</span>
					<div class="clear"></div>
					<textarea maxlength="250" class="textarea" id="fileDescription" placeholder="请输入图片说明"></textarea>
				</div>
			</div>
			<div class="btn_box">
				<span id="cancle" class="fl">取消</span>
				<span id="save" class="fr red">保存</span>
			</div>
			<div style="height: 50px;"></div>
		</div>
		<!-- html代码 end -->

		<!-- js代码 start -->

		<!-- 基础js start -->
		<script src="../../../js/mui.min.js"></script>
		<script src="../../../js/utils/h.js"></script>
		<script src="../../../js/constant.js"></script>
		<script src="../../../js/common.js"></script>
		<script src="../../../js/utils/base64.js"></script>
		<script src="../../../js/utils/md5.js"></script>
		<script src="../../../js/utils/sortMap.js"></script>
		<script src="../../../js/utils/http.js"></script>
		<script src="../../../js/app.js"></script>
		<!-- 基础js end -->
		<script src="../../../js/mui.zoom.js"></script>
		<script src="../../../js/mui.previewimage.js"></script>
		<!-- 
		
			app.jumpTo('../../../picture/add.html', 'view/service/picture/add.html', {
				helpId: h('#helpId').val(),
				serviceNo: h('#serviceNo').html()
			});
			
		 -->
		<script type="text/javascript" charset="utf-8">
			(function($, doc) {
				$.init();

				$.plusReady(function() {
					var self = plus.webview.currentWebview();
					var wo = self.opener();
					console.log(self.serviceNo)
					console.log(self.reportHelpId)
					h('#serviceNo').val(self.serviceNo);
					h('#helpId').val(self.helpId); 
					
					// 保存
					h("#save").tap(function() {
						var path = h('#path').val()
						if (!path) {
							app.toast('请选择图片')
							return;
						}
						var failSize = h('#failSize').val()
						if (failSize > 15*1024*1024) {
							app.toast('上传图片不可大于15M')
							return;
						}
						app.hideSoftKeybord()
						app.showWaiting("上传中...")
						ajaxUploader(BASE_URL + 'cc/service/annex/uploadFile', path, {
							serviceNo: h('#serviceNo').val(),
							helpId: h('#helpId').val(),
							desc: h('#fileDescription').val(),
							enginnerId: app.getUser().enginnerId,
							fseName: app.getUser().name
						}, function(data) {
							app.closeWaiting()
							if (data.code === 200) {
								app.toast('保存成功')
								wo.evalJS("addPictureSuccess(1)")
								$.back()
							} else {
								app.toast(data.msg)
							}
						}, function(err) {
							app.closeWaiting()
							app.toast()
							console.log(err)
						})
					});
					
					// 取消
					h("#cancle").tap(function() {
						$.back()
					});

					// 选择图片
					h('#takePicture').tap(function() {
						var btnArray = [{
							title: "拍照"
						}, {
							title: "相册"
						}];
						plus.nativeUI.actionSheet({
							title: "选择照片",
							cancel: "取消",
							buttons: btnArray
						}, function(e) {
							var index = e.index;
							switch (index) {
								case 0:

									break;
								case 1:
									var cmr = plus.camera.getCamera();
									cmr.captureImage(function(path) {
										console.log("Capture image success: " + path);
										h('#path').val(path);
										plus.io.resolveLocalFileSystemURL(path, function(fs) {
											fs.file(function (file) {
												console.log("image name: " + file.name)
												console.log("image size: " + file.size)
												h('#failSize').val(file.size);
												h('#takePicture').html(file.name);
											})
										})
									}, function(e) {
										console.log("Capture image failed: " + error.message);
									}, {
										filename: '_doc/camera/',
										index: 1
									});
									break;
								case 2:
									plus.gallery.pick(function(path) {
										console.log("gallery pick success: " + path);
										h('#path').val(path);
										plus.io.resolveLocalFileSystemURL(path, function(fs) {
											fs.file(function (file) {
												console.log("image name: " + file.name)
												console.log("image size: " + file.size)
												h('#failSize').val(file.size);
												h('#takePicture').html(file.name);
											})
										})
									}, function(error) {
										console.log("Gallery image failed: " + error.message);
									}, {
										filter: 'image'
									});
									break;
							}
						});
					})

				});

			}(mui, document));
		</script>
		<!-- js代码 end -->
	</body>

</html>
